<script setup lang="ts">
//导入
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { http } from "../../utils/http";
  import { loginlofo } from '../../stores/loginlofo/loginlofo'
  import { logintoken } from '../../stores/loginToken/loginToken'
// 模拟加载状态
const loading = ref(false)
//定义数据
const phone = ref('')
const password = ref('')
//导入自定义的类型
import type{ loginForm } from "../../types/login";
//存放回调函数的常量
const loginForm2 =ref<loginForm>({
  phone: '',
  password: ''
})
//导入自定义的函数
import { login } from "../../services/login";
//{{工作区}}

const onLogin = async () => { 
       //检测是否填写数据
   if (!loginForm2.value.phone && !loginForm2.value.password ) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  loading.value = true
  // 模拟请求延迟
  // setTimeout(() => {
   
   
    // 这里可以替换为真实的登录接口

  
    const res = await login(loginForm2.value)
    
    if(res.code === 20002 || res.code === 20003 || res.code === 20004){
      uni.showToast({
        title: res.message,
        icon: 'none'
      })
       loading.value = false
    }
    //  if(res.code === 20003){
    //   uni.showToast({
    //     title: res.message,
    //     icon: 'none'
    //   })
    //   loading.value = false
    // }
    if(res.code === 20000){
     //保存token
  const loginToken = logintoken()
  loginToken.setToken(res.data.token)
  const loginLofo = loginlofo()
  await loginLofo.initUserInfo()
    //登录跳转
    loading.value = false
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      success: () => {
        // 登录成功后跳转到首页
        uni.switchTab({
          url: '/pages/my/my'
        })
      }
    })
    }
    
  
  } 

onLoad(() => {
//   //清空token
//   const loginToken = logintoken()
//  loginToken.clearToken()
})
 </script>
<template>
  <!-- login.wxml -->
<view class="login-container">
  <!-- 顶部标题 -->
  <view class="header">
    <!-- <text class="title">欢迎登录</text> -->
    <text class="title">请使用您的账号登录</text>
  </view>
  
  <!-- 登录表单 -->
  <view class="form-container">
    <view class="input-group">
      <view class="input-item">
        <text class="label">账号</text>
        <input class="input" type="text" placeholder="请输入手机号/用户名" v-model="loginForm2.phone"  />
      </view>
      <view class="input-item">
        <text class="label">密码</text>
        <input class="input" type="password" placeholder="请输入密码" v-model="loginForm2.password" />
      </view>
    </view>
    
    <!-- 选项区域 -->
    <!-- <view class="options">
      <view class="remember-me">
        <checkbox checked="{{rememberPassword}}" bindtap="toggleRememberPassword" />
        <text class="option-text">记住密码</text>
      </view>
     
    </view> -->
    <button type="default" @click="onLogin">{{ loading ? '登录中...' : '登录' }}</button>
  </view>
</view>
</template>



<style scoped>
/* login.wxss */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.header {
  text-align: center;
  margin-top: 120rpx;
  margin-bottom: 80rpx;
}

/* .title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
} */

.subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.form-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 40rpx;
}

.input-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  padding: 30rpx 0;
}

.input-item:last-child {
  border-bottom: none;
}

.label {
  width: 140rpx;
  font-size: 32rpx;
  color: #333;
}

.input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.input-placeholder {
  color: #999;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
}

.remember-me, .forgot-password {
  display: flex;
  align-items: center;
}

.option-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.forgot-password .option-text {
  color: #764ba2;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: #fff;
  border-radius: 44rpx;
  font-size: 34rpx;
  border: none;
  margin-bottom: 50rpx;
}

.login-btn[disabled] {
  background: #ccc;
}


.icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.icon-text {
  font-size: 24rpx;
  color: #666;
}


</style>